Media Helpers
Layout support for media items
Aspect Ratios ( w : h )
.media__ratio--square
![](/Content/img/examples/culture.jpg)
.media__ratio--full
![](/Content/img/examples/culture.jpg)
.media__ratio--frame
![](/Content/img/examples/culture.jpg)
.media__ratio--wide
![](/Content/img/examples/culture.jpg)
.media__ratio--double
![](/Content/img/examples/culture.jpg)
.media__ratio--triple
![](/Content/img/examples/culture.jpg)
.media__ratio--triple-triple
![](/Content/img/examples/culture.jpg)
.media__ratio--quad
![](/Content/img/examples/culture.jpg)
.media__ratio--quad-double
![](/Content/img/examples/culture.jpg)
Object Fit
.media__fit--fill
![](/Content/img/examples/culture.jpg)
.media__fit--contain
![](/Content/img/examples/culture.jpg)
.media__fit--cover
![](/Content/img/examples/culture.jpg)
.media__fit--none
![](/Content/img/examples/culture.jpg)
.media__fit--scale-down
![](/Content/img/examples/culture.jpg)
Media Bleed
.media__bleed--full
![](/Content/img/examples/culture.jpg)
.media__bleed--right.media__bleed--half
![](/Content/img/examples/culture.jpg)
.media__bleed--left.media__bleed--half
![](/Content/img/examples/culture.jpg)
Using these classes
These classes will fill available container width and include these styles in addition to the ratios.
.{class} { width: 100%; object-fit: cover; }The ratio class should be added to the media asset directly.